<template>
  <Modal
    v-model="showModal"
    :footer-hide="true"
    fullscreen
    @on-cancel="showModal = false"
  >
    <div class="header" slot="header">
      <span> {{ configTitle }}</span>
      <span class="title">{{ title }}</span>
    </div>

    <Tabs
      v-model="curModal"
      :animated="false"
      style="height: 100%; width: 100%"
    >
      <TabPane
        v-for="item in modules"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <component
          :is="curComp(item)"
          :showModal="showModal"
          :curPathProp="curPath"
          :curModal="curModal"
          @change-tab="handleTabChange"
        ></component>
      </TabPane>
    </Tabs>
  </Modal>
</template>

<script>
import ConfigEditor from "./ConfigEditor";
import ConfigList from "./ConfigList";
import ApiManager from "./ApiManager";
import IconManager from "./IconManager";

export default {
  data() {
    return {
      curPath: "",
      curData: {},
      curConfig: {},
      curModal: "configEditor",
      configTitle: "资源管理",
      showModal: false,
    };
  },
  computed: {
    modules() {
      let res = [
        {
          title: "配置调整",
          name: "configEditor",
        },
        {
          title: "配置查询",
          name: "configList",
        },
        {
          title: "图标管理",
          name: "iconManager",
        },
      ];
      if (this.$store.getters.userInfo.id) {
        res.push({
          title: "api管理",
          name: "apiManager",
        });
      }
      return res;
    },
    title() {
      return this.curConfig && this.curConfig.name
        ? `当前配置：${this.curConfig.name}`
        : "";
    },
  },
  watch: {
    showModal() {
      let path = this.getCurPath();
      if (this.showModal) {
        this.curPath = path;
      }
    },
  },
  components: {
    ConfigEditor,
    ConfigList,
    ApiManager,
  },

  methods: {
    getCurPath() {
      let arr = location.hash.split("/");
      let path = arr[arr.length - 1];
      if (path.includes("?")) {
        path = path.split("?")[0];
      }
      return path;
    },
    handleTabChange(tab, curConfig) {
      this.curModal = tab;
      this.curConfig = curConfig;
      this.curPath = curConfig.path;
    },
    curComp(item) {
      let comp;
      switch (item.name) {
        case "configEditor":
          comp = ConfigEditor;
          break;
        case "configList":
          comp = ConfigList;
          break;
        case "apiManager":
          comp = ApiManager;
          break;
        case "iconManager":
          comp = IconManager;
          break;
      }
      return comp;
    },
    handleShowModal() {
      this.showModal = !this.showModal;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  font-size: 15px;
  .title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

::v-deep {
  .ivu-tabs {
    display: flex;
    flex-direction: column;
  }
  .ivu-tabs-no-animation > .ivu-tabs-content {
    flex: 1;
    overflow: hidden;
  }
  .ivu-tabs .ivu-tabs-tabpane {
    height: 100%;
  }
  .ivu-modal-body {
    padding: 0;
  }
  .ivu-tabs-bar {
    margin-bottom: 0;
  }
}
</style>
